<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo09-组件-is测试</title>
</head>
<script src="../libs/vue.js"></script>
<body> 
    <div id="app">
      <div>
        <!-- render error : -->
        <table>
          <!-- 这样写，果然渲染出错 -->
          <blog-post-row></blog-post-row>
        </table>
      </div>
      <hr><br>
      <div>
        <!-- render right : -->
        <table>
          <!-- 这样渲染，直接自动添加了tbody，并且dom中的tr与template中的tr做了合并！框架做的工作真多。。。 -->
          <tr is="blog-post-row"></tr>
        </table>
      </div>
    </div>
</body>
<script>

Vue.config.productionTip = false;

Vue.component('blog-post-row',{
  template:`<tr><td><span> this is span </span></td></tr>`
});

var app = new Vue({
  el: '#app'
});

</script>
</html>